<template>
  <div>
    <h1>测试表格导出</h1>
    <div>
      <ExportExcelComponent
        :tableTitleData="title"
        :asyncDataApi="asyncDataApi"
        :isCustom="isCustom"
        :listQuery="listQuery"
        ref="export"
        :filterFunction="handleDateFilter"
      >
        <template #custom>
          <!-- <a-button type="primary" @click="handleClick">导出excel</a-button> -->
          <a-dropdown-button>
            Dropdown
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon type="user" />1st menu item
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="user" />2nd menu item
              </a-menu-item>
              <a-menu-item key="3">
                <a-icon type="user" />3rd item
              </a-menu-item>
            </a-menu>
          </a-dropdown-button>
        </template>
      </ExportExcelComponent>
    </div>
  </div>
</template>
<script>
import ExportExcelComponent from "./ExportExcelComponent/ExportExcelComponent.vue";
import { asyncDataApi } from "./request";
import dayjs from "dayjs";
export default {
  data() {
    return {
      listQuery: {
        name: "yyy",
        age: 18,
      },
      isCustom: true,
      asyncDataApi: null,
      title: [
        { code: "id", title: "序号" },
        { code: "hobby", title: "爱好" },
        { code: "name", title: "姓名" },
        { code: "age", title: "年龄" },
        // { code: "hobby", title: "爱好" },
        { code: "sex", title: "性别" },
        { code: "address", title: "地址" },
        { code: "birthday", title: "生日" },
        { code: "createTime", title: "创建时间" },
        { code: "updateTime", title: "更新时间" },
        { code: "remark", title: "备注" },
        { code: "status", title: "状态" },
      ],
    };
  },
  methods: {
    handleDateFilter(data) {
      const res = data.reduce((pre, cur) => {
        for (let i in cur) {
          if (i === "createTime") {
            cur[i] = dayjs(cur[i] * 1000).format("YYYY-MM-DD HH:mm:ss");
          }
        }
        pre.push(cur);
        return pre;
      }, []);
      return res;
    },
    async handleMenuClick(val) {
      // const titleNewData = [];
      // for (let i = 1; i < 500; i++) {
      //   this.title.forEach((item) => {
      //     titleNewData.push({ code: item.code + i, title: item.title + i });
      //   });
      // }
      // this.title = titleNewData;

      console.log("点击了导出excel", val);
      await (this.asyncDataApi = asyncDataApi);
      this.$refs.export.startExport();
    },
    // async handleClick() {
    //   console.log("点击了导出excel");
    //   await (this.asyncDataApi = asyncDataApi);
    //   this.$refs.export.startExport();
    // },
  },
  components: {
    ExportExcelComponent,
  },
};
</script>
